<script setup>
import Compare from '@/components/Compare.vue'
import { usePaintingStore } from '@/store'

import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const paintingStore = usePaintingStore()

// 页面传递参数
const queryItem = ref({})
// 是否对比
const isCompare = ref(false)
// 对比组件ref
const CompareRef = ref(null)

// 点击切换是否是对比状态
function isCompareClick() {
    isCompare.value = !isCompare.value
    CompareRef.value.resetPosition()
}

// 图片预览
function previewImageFn() {
    uni.previewImage({
        urls: [queryItem.value.imgPath],
    });
}

// 保存图片
function saveImgFn() {
    paintingStore.accredit({ path: queryItem.value.imgPath })
}


onLoad((e) => {
    if (e.data) {
        queryItem.value = JSON.parse(e.data)
    }
})
</script>

<template>
    <div class='drawingResult'>
        <NavBar>{{ queryItem?.title }}</NavBar>
        <div class="container">
            <div class="img_box">
                <img :src="queryItem.imgPath" alt="" class="imgSty" :class="{ show: !isCompare }" mode="aspectFit"
                    @click="previewImageFn">
                <div class="compare_box" :class="{ show: isCompare }">
                    <Compare ref="CompareRef" :imgUrl="queryItem?.imgPath" :orgImage="queryItem?.orgImgPath"></Compare>
                </div>
                <div class="compareBox" @click="isCompareClick">
                    <i class="iconfont ai-icon-qianhouduibi"></i>
                    <p class="compareText">{{ !isCompare ? '对比' : '取消对比' }}</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <div class="create_btn" @click="saveImgFn">
                    <div class="create_btn_title">保存图片</div>
                </div>
            </div>
        </div>
    </div>
    <van-toast id="van-toast"></van-toast>
</template>

<style lang='scss' scoped>
.drawingResult {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .container {
        box-sizing: border-box;
        flex: 1;
        padding: 30rpx;
        display: flex;
        flex-direction: column;

        .img_box {
            flex: 1;
            border-radius: 20rpx;
            background-color: var(--a-main-box-bg-color);
            position: relative;
            overflow: hidden;

            .imgSty {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-200%, -50%);
                width: 100%;
                height: 100%;

                &.show {
                    transform: translate(-50%, -50%);
                }
            }

            .compare_box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-200%, -50%);
                width: 100%;
                height: 100%;

                &.show {
                    transform: translate(-50%, -50%);
                }
            }

            .compareBox {
                position: absolute;
                width: 80rpx;
                right: 25rpx;
                bottom: 25rpx;
                color: var(--a-one-text-color);
                text-align: center;

                .confont {
                    font-size: 32rpx;
                }

                .compareText {
                    font-size: 18rpx;
                }
            }
        }
    }

    .footer {
        .footer_placeholder {
            height: 176rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 176rpx;
            background: var(--a-main-tabNav-bg-color);
            padding: 0 30rpx 30rpx;
            display: flex;
            align-items: center;
            gap: 30rpx;

            .left_box {
                width: 70rpx;
                font-size: 20rpx;
                color: var(--a-one-text-color);
                text-align: center;

                .iconfont {
                    font-size: 26rpx;
                }

                .text {
                    margin-top: 10rpx;
                }
            }

            .create_btn {
                flex: 1;
                height: 86rpx;
                background: var(--a-main-color);
                border-radius: 44rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .create_btn_title {
                    font-size: 32rpx;
                    color: var(--a-one-text-color);
                }

                .create_btn_label {
                    font-size: 20rpx;
                    color: var(--a-one-text-color);
                }
            }
        }
    }
}
</style>